import React from "react";

// 1. npm install classnames
// 通过 classnames 创建一个对象，该对象中就是 class
import classnames from 'classnames'

// 导入外部定义的 css 样式，这里不是通过模块导入，而是通过 link 导入
import './02-style.css'

class App extends React.Component {

  state = {
    flag: true
  }

  render(){

    // 属性名就是 class 名
    // 对应的属性值就是一个布尔值，为真的时候添加该 class， 为假的时候会移除该 class
    const h1Class = classnames({
      bg: true,
      success: this.state.flag,
      error: !this.state.flag
    })

    return (<>
      <h1 className={h1Class} onClick={()=>{
        this.setState({
          flag: !this.state.flag
        })
      }}> 当你停下来休息时，不要忘记别人还在奔跑，所有请绊倒他。 </h1>

    </>)
  }
}

export default App
